<!DOCTYPE html>

<html lang="en">
  <meta charset="utf-8" />
  <title>IED-entity-relation</title>
  <body>
    <div>
      <button id="btn-1">保存</button>
      <button id="btn-2">加载</button>
      <button id="btn-3">清除所有</button>
      <script src="../node_modules/ice-render/dist/index.umd.js"></script>
      <script src="../dist/index.umd.js"></script>
    </div>
    <br/>
    <canvas id="canvas-1" width="1024" height="768" style="background-color: #f7f7f7;"></canvas>
  </body>
  <script type="text/javascript">
      let ice = new ICE.ICE().init('canvas-1');
      document.querySelector('#btn-1').addEventListener('click', (evt) => {
        const jsonStr = ice.toJSONString();
        console.log(jsonStr);
        window.localStorage.setItem('json-data', jsonStr);

        const erObject=IED.toSchemaObject(ice.childNodes);
        console.log(erObject);
      });
      document.querySelector('#btn-2').addEventListener('click', (evt) => {
        ice.registerType("Entity",IED.Entity);
        ice.registerType("Relation",IED.Relation);

        const jsonStr = window.localStorage.getItem('json-data');
        ice.fromJSONString(jsonStr);
      });
      document.querySelector('#btn-3').addEventListener('click', (evt) => {
        console.log('ice.clearAll()');
        ice.clearAll();
      });

      let entity1=new IED.Entity({
          left:100,
          top: 100,
          width:150,
          height:200,
          showMinBoundingBox: true,
          showMaxBoundingBox: true,
          entityName:'User',
          fields:[
            {
              name:'id',
              type:'number',
              length:64,
            },
            {
              name:'userName',
              type:'string',
              length:64,
            },
            {
              name:'password',
              type:'string',
              length:64,
            },
            {
              name:'email',
              type:'string',
              length:128,
            },
            {
              name:'cellPhone',
              type:'string',
              length:32,
            }
          ]
        })
        ice.addChild(entity1);

        let entity2=new IED.Entity({
          left:500,
          top: 100,
          width:150,
          height:200,
          showMinBoundingBox: true,
          showMaxBoundingBox: true,
          entityName:'Role',
          fields:[
            {
              name:'id',
              type:'number',
              length:64,
            },
            {
              name:'roleName',
              type:'string',
              length:64,
            },
            {
              name:'roleCode',
              type:'string',
              length:64,
            }
          ]
        })
        ice.addChild(entity2);

        let link1=new IED.Relation({
          left: 0,
          top: 0,
          startPoint: [300, 300],
          endPoint: [400, 400],
          style: {
            strokeStyle: '#08ee00',
            fillStyle: '#008000',
            lineWidth: 2,
          },
          arrow:'end',
        });
        ice.addChild(link1);

        //双击动态修改 entityName 和 fields
        ice.evtBus.on("dblclick",() => {
          console.log("update entity...");
          entity1.setState({
            entityName:"New Name",
            fields:[
              {
                name:'id',
                type:'number',
                length:64,
              }
            ]
          });
        });
  </script>
</html>
